iceBreaker > Blogger Hacks

01/06/2010

Corrigindo a exibição somente títulos em páginas estáticas

, , ,

Corrigindo a exibição somente títulos em páginas estáticas

por Sérgio Estrella 01/06/2010
Blogger Hacks 

Aqueles que utilizam a visualização somente título das postagens nas páginas inicial, de marcadores e arquivo, tiveram um problema com as páginas estáticas nativas do Blogger: elas também apareciam somente título, e não havia como acessá-las por completo. Felizmente, existe um hack para corrigir este problema, que você confere a seguir.

Para corrigir a exibição somente títulos das páginas estáticas, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.
Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o código utilizado pelo Hack somente títulos como no exemplo abaixo (utilizando o Ctrl+F do seu navegador):

<b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <li></li><data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>

Então SUBSTITUA pelo seguinte código: 

     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/>
        <b:include data='post' name='comments'/>
      <b:else/><b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <li></li><data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if></b:if>

Visualize para ver se está tudo correto e clique em Salvar Modelo.

Agora seu blog exibirá apenas o título das postagens, exceto nas páginas de postagem e nas páginas estáticas. Para personalizar a formatação dos títulos, utilize o hack “Personalizando a exibição somente-títulos no Blogger”.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

17/09/2009

Ativando as fotos/avatares nos comentários do Blogger

, , ,

Ativando as fotos/avatares nos comentários do Blogger

por Sérgio Estrella 17/09/2009
Blogger Hacks 

Como uma das novidades em comemoração aos 10 anos do Blogger, hoje foi anunciado pelo Blogger Buzz o suporte à fotos/avatares nos comentários abaixo dos posts do Blogger/Blogspot. Apesar de não ter sido como a gente esperava, o novo recurso está aí – mesmo que não sendo ativado automaticamente nos templates personalizados. Para ativar, podemos reverter os modelos de widgets para o padrão (em Editar HTML) ou então modificar o código para tal, como veremos abaixo. Vamos lá?

Para ativar o suporte a fotos/avatares no Blogger, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.
Agora, marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Procuro no seu código por <dl id='comments-block'> (utilizando o CTRL+F do seu navegador). Você deverá SUBSTITUIR esta parte pela parte em laranja abaixo: 

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:blog.enabledCommentProfileImages'>
              <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

ACRESCENTE também em seu código a parte que está em verde, na mesma posição em que está no código que acima.

Visualize para verificar se está tudo correto e clique em Salvar Modelo.  Agora seu blog passará a mostrar as fotos dos usuários que comentarem com a conta Google.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo. Note que em templates cuja área de comentários seja muito personalizada, os avatares podem ter seu posicionamento prejudicado. Ainda não foi descoberto um modo de ajustar isso – o tutorial será atualizado assim que possível, com essa informação.

09/08/2009

Exibindo elementos de acordo com o autor, no Blogger

, , ,

Exibindo elementos de acordo com o autor, no Blogger

por Sérgio Estrella 09/08/2009
Blogger Hacks 

Blogs grandes ou com um alto número de postagens costumam ter mais de um autor, o que muitas vezes torna necessário o uso de rodapé nas postagens introduzindo o autor e anúncios exibidos com a conta de cada autor – ou seja, elementos diferentes para autores diferentes. Neste Hack você vai aprender a controlar a exibição de elementos de acordo com o autor da postagem.

Para controlar a exibição de um elemento/widget/gadget no seu template, de acordo com o autor, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o elemento que você deseja controlar a exibição no código fonte do seu template (utilizando o Ctrl+F do seu navegador). Se você não conseguir encontrar o elemento desejado, tente marcar a opção Expandir modelos de widgets e procurar novamente.

Agora vamos aplicar o Hack (parte em vinho): 

<b:if cond='data:post.author == "Nome do autor"'>

- código do elemento -

</b:if>

A parte “- código do elemento –” é apenas uma representação do código do elemento terá a exibição controlada. Altere a parte sublinhada pelo nome do autor cujas postagens exibirão aquele elemento.

Para exibir elementos diferentes para diferentes autores, você vai repetir o código para cada autor, como no exemplo:

<b:if cond='data:post.author == "Autor1"'>

- código do elemento que aparecerá para o Autor1 -

</b:if>
<b:if cond='data:post.author == "Autor2"'>

- código do elemento que aparecerá para o Autor2 -

</b:if>
<b:if cond='data:post.author == "Autor3"'>

- código do elemento que aparecerá para o Autor3 -

</b:if>  

Para usar banners de publicidade, como os do AdSense, variando de autor pra autor dentro das postagens, você deverá converter o código numa linguagem suportada pelo Blogger. Para isso, copie o código do anúncio e o converta através do Parse HTML. Então copie o código gerado e cole no lugar do código do elemento (em cinza) correspondente ao autor desejado.

Visualize para verificar se está tudo correto e clique em Salvar Modelo. Agora os widgets aparecerão apenas nas postagens do(s) autor(es) determindo.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Referência: UsuárioCompulsivo

08/08/2009

Exibindo somente postagens com determinado marcador na Página Inicial, no Blogger

, , ,

Exibindo somente postagens com determinado marcador na Página Inicial, no Blogger

por Sérgio Estrella 08/08/2009
Blogger Hacks 

Este Hack é um recurso muito interessante pra diversos tipos de blog: vamos supor que você queira exibir somente as postagens que sejam “notícia” na página inicial, ou então queira criar uma espécie de índice para o seu blog; ou até mesmo que você escreva para um tipo de público específico mas também quer escrever sobre outros assuntos, sem necessariamente “bagunçar” sua página inicial. Para isso, você precisa filtrar as postagem que aparecem na Home. E como fazemos isso? Determinando um único marcador que poderá aparecer lá, como o marcador “Notícias” ou “Índice”, enfim.

Para filtrar as postagens que aparecem na página inicial por marcador, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template. Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o seguinte código (utilizando o Ctrl+F do seu navegador):

<b:includable id='main' var='top'>

Agora nós vamos substituir o código que está abaixo dele e antes de </b:loop>, da seguinte forma:

<b:loop values='data:posts' var='post'>
SUBSTITUA o código que está aqui pelo código abaixo
</b:loop>

Substitua a parte em laranja pelo seguinte código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;Marcador&quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Substitua a parte em vermelho pelo nome do marcador cujas postagens deverão aparecer na página inicial.

Visualize para ver se está tudo correto e clique em Salvar Modelo.

Agora serão exibidas na página inicial somente as postagens com o marcador que você determinou.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Referência: Organized Chaos

25/07/2009

Ocultando elementos em páginas específicas no Blogger

, , ,

Ocultando elementos em páginas específicas no Blogger

por Sérgio Estrella 25/07/2009
Blogger Hacks 

Este Hack é muito importante para quem quiser deixar seu Blogger/Blogspot com uma cara mais profissional. Consiste em esconder ou exibir widgets dependendo do tipo de página que está sendo visualizada, como a página inicial, de postagens, marcadores e arquivo. Com ele, podemos por exemplo, ocultar um banner ou anúncio quando o usuário estiver vendo uma página de postagem individual. As possibilidades são imensas!

Para controlar a exibição de um elemento/widget/gadget no seu template, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template. Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o widget que você deseja controlar a exibição, através do título dele (utilizando o Ctrl+F do seu navegador). Caso o widget não tenha um título, vá em Elementos de Página e dê um título a ele (poderá ser removido depois). Você encontrará algo parecido com isso:

<b:widget id='HTML1' locked='false' title='Título' type='HTML'>

Este é apenas um exemplo, o trecho não precisa ser HTML1, ou locked=’false’. Você deverá encontrar seu widget através do título.

Agora vamos analisar o restante do código, para que possamos aplicar o Hack (parte em vinho): 

<b:widget id='HTML1' locked='false' title='Título' type='HTML'><b:if cond='data:blog.pageType != "item"'>

<b:includable id='main'>

(código específico da variável)

- código fonte do Widget -

</b:if>

</b:includable>
</b:widget>

A parte “- código fonte do Widget –” é apenas uma representação do código do Widget que você encontrará entre as partes verdes.

Então vamos acrescentar o código entre <b:includable id='main'> e </b:includable>, que está em vinho, SUBSTITUINDO a parte “(código específico da variável)” pelo código desejado: 

Ocultar nas páginas de postagens:
<b:if cond='data:blog.pageType != "item"'>

Ocultar na página incial:
<b:if cond='data:blog.homepageUrl != data:blog.url'>

Ocultar em uma postagem específica:
<b:if cond='data:blog.url != "URL do post"'>

Ocultar na página inicial, de marcadores e arquivo:
<b:if cond='data:blog.pageType == "item"'>

Ocultar em uma página de marcador específica:
<b:if cond='data:blog.homepageUrl != “http://URL_do_Blog/search/label/Marcador”'>

Ocultar nas páginas de arquivo:
<b:if cond='data:blog.pageType != "archive"'>

Ocultar na página de marcadores, postagens e arquivo:
<b:if cond='data:blog.homepageUrl == data:blog.url'>

Por exemplo, vamos supor que eu queira que meu widget de título “Publicidade” esteja oculto somente na página inicial. Então vou encontrá-lo através do título e acrescentar o código, deixando-o assim:

<b:widget id='HTML1' locked='false' title='Publicidade' type='HTML'><b:if cond='data:blog.pageType != "item"'>

<b:includable id='main'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

- código fonte do Widget -

</b:if>

</b:includable>
</b:widget>

O Hack também funciona para elementos que não sejam widgets, como partes em HTML. Neste caso, basta colocar o código em vinho antes do início do código e o </b:if> após o fim.

Visualize para ver se está tudo correto e clique em Salvar Modelo.

Agora os widgets aparecerão apenas nas páginas que você determinou.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

01/07/2009

Sinalizando o Feed dos marcadores nas páginas de marcadores

, , ,

Sinalizando o Feed dos marcadores nas páginas de marcadores

por Sérgio Estrella 01/07/2009
Blogger Hacks

Muitas vezes, os leitores querem ler apenas sobre determinado assunto, mas aí o blog aborda diversos. Então, para evitar a “bagunça” no leitor de feeds, o usuário acaba não assinando o Feed deste blog. Porém, você pode evitar que isso aconteça com o seu blog, oferecendo feeds específicos para cada marcador, que são identificados pelo navegador em suas próprias páginas. Ou seja, quando o usuário acessar a sua página de marcadores, surgirá mais uma opção de assinatura de feed: o feed do marcador (imagem abaixo).

Para ativar a sinalização do Feed dos marcadores nas páginas de marcadores em seu blog, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o seguinte código (utilizando o Ctrl+F do seu navegador):

<body>

Então cole o seguinte código ANTES: 

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<link expr:href='&quot;http://seublog.blogspot.com/feeds/posts/default/-/&quot; + data:blog.pageName' expr:title='data:blog.title + &quot; - &quot; + data:blog.pageName' rel='alternate' type='application/rss+xml'/></b:if></b:if></b:if>

Substitua a parte em laranja pela URL do seu blog.

Visualize para ver se não há erros no template e clique em Salvar Modelo. Agora o seu blog sinalizará os feeds dos marcadores em suas respectivas páginas.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou, então refaça todo o processo.

Obrigado à Marcos Gabriel pela sugestão.

25/06/2009

Gerando um Feed com marcadores cruzados no Blogger

, , ,

Gerando um Feed com marcadores cruzados no Blogger

por Sérgio Estrella 25/06/2009
Blogger Hacks 

Não é segredo que os marcadores facilitam e muito a vida dos blogueiros, mas como tudo na vida, eles também não são perfeitos. Uma forma de aumentar a eficiência dos marcadores para o usuário, é cruzando-os. Por exemplo, se eu tenho um blog sobre cinema e quero ver apenas as análises dos filmes de terror, basta cruzar os marcadores “Análises” e “Terror” e eu verei apenas os posts que contém estes dois marcadores. Neste Hack você vai aprender à gerar um Feed a partir destes cruzamentos, que depois podem ser usados em Widgets ou outros Hacks baseados em Feeds.

Para obter o feed do cruzamento de marcadores basta seguir uma fórmula simples de URL:

http://www.blogger.com/feeds/blogID/posts/default/-/Marcador1/Marcador2/

Substitua a parte em laranja pela ID do seu Blog no Blogger. Essa ID pode ser encontrada na barra de endereços quando se está no painel Postagens, Layout ou Configurações. Então, é só copiar o número que aparece (como na imagem) e usá-lo no lugar da parte laranja.

Já a parte em verde deve ser substituída pelo primeiro marcador do cruzamento, e a parte roxa pelo segundo marcador. Se usássemos o exemplo do blog sobre cinema citado anteriormente, e considerando que a ID do meu blog é 1234567890, a URL do feed cruzado ficaria assim:

http://www.blogger.com/feeds/1234567890/posts/default/-/Análises/Terror/

Com este endereço em mãos você tem a fonte do feed de marcadores cruzados e poderá oferecer este link à seus usuários, queimá-lo com o FeedBurner ou usá-lo num widget de Feed.

Obrigado à Marcos Gabriel pela sugestão.